<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面滚动</title>
    <style type="text/css">

        body {
            overflow: hidden ;
        }

        .wrapper { border: 1px solid gray ; }

        /* 亲子选择器 */
        .wrapper>* {
            border: 1px solid blue ;
            margin: 10px ;
            height: 200px ;
            line-height: 200px ;
            text-align: center ;
            font-size: 100px;
        }
    </style>
</head>
<body>

    <ul>
        <li>scrollBy( x , y )</li>
        <li>scrollTo( x , y )</li>
    </ul>

    <div class="wrapper"></div>

    <script type="text/javascript">
        // 选择匹配于指定选择器的首个元素
        let wrapper = document.querySelector( '.wrapper' );
        // 用for循环为w元素动态添加100个子元素
        for( let i = 1 ; i <= 100 ; i++ ){
            // 创建一个div元素
            let element = document.createElement( 'div' );
            element.innerHTML = i ;
            // 将新创建的div元素添加到 w 元素内部末尾
            wrapper.appendChild( element );
        }

        // console.log( wrapper.clientHeight , wrapper.scrollHeight , wrapper.offsetHeight );

        const height = wrapper.offsetHeight ;

        // setTimeout( window.scrollBy , 1000 , 0 , 200 );
        // setInterval( window.scrollBy , 10 , 0 , 1 );

        let offsetY  = 0 ;

        let handler = ()=>{
            // scrollBy( 0 , 1 ); // scrollBy( x , y )
            offsetY++ ;
            scrollTo( 0 , offsetY );
            console.log( offsetY );
            if( offsetY >= height ){
                clearInterval( timer ); // 清除定时器
            }
        } ;
        // 创建一个定时器
        const timer = setInterval( handler , 10 );

    </script>
    
</body>
</html>